import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { restRequest as request } from '../../lib';
import {
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Card,
  InputNumber,
  Radio,
  Icon,
  Tooltip,
  Modal,
  Collapse,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './style.less';
import moment from 'moment';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const { Option } = Select;
// const { DatePicker } = DatePicker;
const { TextArea } = Input;

@connect(({ loading }) => ({
  submitting: loading.effects['form/submitRegularForm'],
}))

@Form.create()
export default class FamilyMemberDetailForm extends PureComponent {

  constructor(props) {
    super(props);

    this.state = {
      memberData: [],
      visible: this.props.visible,
      confirmLoading: false,
    };

    this.loadMemberDetailFromServer = () => {
      var self = this;
      request({
        method: 'GET',
        url: 'members/detail/'+this.props.id+'?withChild=false',
        query: { withChild: false },
        success_fn: (res) => {
          if(res){
            self.setState({memberData: res})
          }
        },
        failure_fn: (err, errorResp) => {
          console.debug('error',err, errorResp);
        }
      })
    }

    this.handleCanDrop = (param) => {
      // debugger
    }
    this.handleGetNodeKey = (param) => {
      // debugger
    }
  }

  componentDidMount() {
    // this.loadMemberDetailFromServer();
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
      }
    });
    this.props.visible = false;
  };
  render() {
    const { visible, onCancel, onCreate } = this.props;
    const { submitting } = this.props;
    const { getFieldDecorator, getFieldValue } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 7, offset: 0 },
        md: { span: 10, offset: 0 },
      },
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 12, offset: 0 },
        md: { span: 12, offset: 0 },
      },
    };

    const customPanelStyle = {
      // borderRadius: 4,
      // marginBottom: 24,
      border: 0,
      // overflow: 'hidden',
    };

    if(!this.props.visible) {
      return (<Modal visible={false}/>);
    }

    return (
      <Modal 
        visible={visible}           
        title={this.props.title}
        okText="提交"
        onCancel={onCancel}
        onOk={onCreate}
        confirmLoading={this.state.confirmLoading}
      >
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} id={this.props.id} hideRequiredMark style={{ marginTop: 2 }}>
            <Collapse bordered={false} defaultActiveKey={['1']}>
              <Panel header="基本信息" key="1" style={customPanelStyle}>
                <Form.Item {...formItemLayout}
                  label={
                    <span>
                      性别<em className={styles.optional}>（必填）</em>
                    </span>
                  }
                >
                  {getFieldDecorator('gender', {
                    initialValue: this.props.memberData.gender,
                    rules: [{ required: true, message: '请输入性别' }],
                  })(
                    <Select placeholder="男" defaultValue="M">
                      <Option value="M">男</Option>
                      <Option value="F">女</Option>
                    </Select>
                  )}
                </Form.Item>
                <FormItem {...formItemLayout}
                  label={
                    <span>
                      出生地<em className={styles.optional}>（必填）</em>
                    </span>
                  }
                >
                  {getFieldDecorator('birthPlace', {
                    initialValue: this.props.memberData.birthPlace,
                    rules: [
                      {
                        required: true,
                        message: '请输入出生地',
                      }
                    ],
                  })(<Input placeholder="请输入出生所在地" />)}
                </FormItem>
                {/* <FormItem {...formItemLayout} 
                  label={
                    <span>
                      公历出生日期<em className={styles.optional}>（选填）</em>
                    </span>
                  }>
                  {getFieldDecorator('birthDate', {
                    initialValue: this.props.memberData.birthDate ? moment(this.props.memberData.birthDate, 'YYYY-MM-DD') : null,
                  })(<DatePicker style={{ width: '100%' }} format='YYYY-MM-DD'
                        placeholder="请输入公历出生日期" />)}
                </FormItem> */}
                <FormItem {...formItemLayout} 
                  label={
                    <span>
                      出生日期<em className={styles.optional}>（必填）</em>
                    </span>
                  }>
                  {getFieldDecorator('birthDate', {
                    initialValue: this.props.memberData.birthDate,
                    rules: [
                      {
                        required: true,
                        message: '请输入农历出生日期',
                      }
                    ],
                  })(<Input placeholder="请输入农历出生日期" />)}
                </FormItem>
                <FormItem {...formItemLayout} 
                  label={
                    <span>
                      属相<em className={styles.optional}>（必填）</em>
                    </span>
                  }>
                  {getFieldDecorator('zodiac', {
                    initialValue: this.props.memberData.zodiac,
                    rules: [
                      {
                        required: true,
                        message: '请输入属相',
                      }
                    ],
                  })(
                    <Select>
                      <Option value="鼠">鼠</Option>
                      <Option value="牛">牛</Option>
                      <Option value="虎">虎</Option>
                      <Option value="兔">兔</Option>
                      <Option value="龙">龙</Option>
                      <Option value="蛇">蛇</Option>
                      <Option value="马">马</Option>
                      <Option value="羊">羊</Option>
                      <Option value="猴">猴</Option>
                      <Option value="鸡">鸡</Option>
                      <Option value="狗">狗</Option>
                      <Option value="猪">猪</Option>
                    </Select>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} 
                  label={
                    <span>
                      去世日期<em className={styles.optional}>（选填）</em>
                    </span>
                  }>
                  {getFieldDecorator('deathDate', {
                    initialValue: this.props.memberData.deathDate,
                  })(<Input placeholder="请输入农历去世日期" />)}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label={
                    <span>
                      配偶姓名
                      <em className={styles.optional}>
                        （选填）
                      </em>
                    </span>
                  }
                >
                  {getFieldDecorator('spouse',{
                    initialValue: this.props.memberData.spouse,
                  })(
                    <Input placeholder="请输入配偶的姓名"/>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label={
                    <span>
                      职业<em className={styles.optional}>（选填）</em>
                    </span>
                  }
                >
                  {getFieldDecorator('occupation',{
                    initialValue: this.props.memberData.occupation,
                  })(
                    <Select>
                      <Option value="其它">其它</Option>
                      <Option value="工人">工人</Option>
                      <Option value="农民">农民</Option>
                      <Option value="军人">军人</Option>
                      <Option value="医生">医生</Option>
                      <Option value="公务员">公务员</Option>
                      <Option value="教师">教师</Option>
                      <Option value="科研人员">科研人员</Option>
                      <Option value="工程师">工程师</Option>
                      <Option value="设计师">设计师</Option>
                      <Option value="企事业职工">企事业人员</Option>
                      <Option value="自由职业者">自由职业者</Option>
                    </Select>
                  )}
                </FormItem>            
              </Panel>
              <Panel header="通讯及其它信息（选填）" key="2" style={customPanelStyle}>
                <FormItem
                  {...formItemLayout}
                  label={
                    <span>
                      手机号码<em className={styles.optional}>（选填）</em>
                    </span>
                  }
                >
                  {getFieldDecorator('phoneNumber',{
                    initialValue: this.props.memberData.phoneNumber,
                  })(
                    <Input placeholder="请输入手机号码"/>
                  )}
                </FormItem>   
                <FormItem
                  {...formItemLayout}
                  label={
                    <span>
                      工作单位<em className={styles.optional}>（选填）</em>
                    </span>
                  }
                >
                  {getFieldDecorator('office',{
                    initialValue: this.props.memberData.office,
                  })(
                    <Input placeholder="请输入工作单位"/>
                  )}
                </FormItem>            
                <FormItem
                  {...formItemLayout}
                  label={
                    <span>
                      家庭住址<em className={styles.optional}>（选填）</em>
                    </span>
                  }
                >
                  {getFieldDecorator('homeAddress',{
                    initialValue: this.props.memberData.homeAddress,
                  })(
                    <Input placeholder="请输入家庭住址"/>
                  )}
                </FormItem>            
                <FormItem
                  {...formItemLayout}
                  label={
                    <span>
                      学历信息<em className={styles.optional}>（选填）</em>
                    </span>
                  }
                >
                  {getFieldDecorator('schoolMsg',{
                    initialValue: this.props.memberData.schoolMsg,
                  })(
                    <Input placeholder="毕业院校，专业及学历"/>
                  )}
                </FormItem>              
                <FormItem
                  {...formItemLayout}
                  label={
                    <span>
                      其他备注<em className={styles.optional}>（选填）</em>
                    </span>
                  }
                >
                  {getFieldDecorator('note',{
                    initialValue: this.props.memberData.note,
                  })(
                    <TextArea placeholder="请输入其他备注" autosize={{ minRows: 2, maxRows: 6 }} />
                  )}
                </FormItem>                     
              </Panel>
            </Collapse>            
          </Form>
        </Card>
      </Modal>
    );
  }
}
